import { useState, useEffect, useRef, memo } from 'react';
import { Modal, Button, Form, Upload, Input, message, Select } from 'antd';
import { CloudUploadOutlined } from '@ant-design/icons';
const { Option } = Select;
const { TextArea } = Input;
const { Dragger } = Upload;
const fileTypes = {
    'JPEG':1,
    'JPG':1,
    'PNG':1,
    'PDF':1,
    'WORD':1,
    'PPT':1,
    'EXCEL':1,
    'XLSX':1
}
const DemandModal = ({ visible, onClose, onOpenConfirmModal }) => {
    const [form] = Form.useForm();
    const [fileList, setFileList] = useState([]);
    const handleChange = info=>{
        const { status, percent } = info.file;
        if ( status === 'done' ) {
            // console.log('done...');
            setFileList(info.fileList);
        } 
    }
    const handleDrop = e=>{
        // console.log('drop......');
        // console.log(e.dataTransfer.files);
    }
    const handleBeforeUpload = ( file )=>{
        
        return new Promise((resolve, reject)=>{
            
            let temp = file.name.split('.');
            let isLt20M = file.size / 1024 / 1024 < 20;
            let fileType = temp.length ? temp[temp.length - 1].toUpperCase() : '';
            if ( isLt20M && fileTypes[fileType] ) {
                return resolve();
            } else {
            
                message.error('文件类型不符合');
                return false;
            }
        })
    }
    return (
        <Modal
            open={visible}
            footer={null}
            onCancel={onClose}
            title={
                <div style={{ textAlign:'center', borderBottom:'1px solid #d9d9d9', paddingBottom:'1rem', marginBottom:'1rem' }}>
                    <div style={{ fontSize:'1.6rem' }}>定制需求提交</div>
                    <div style={{ fontSize:'1rem', color:'rgba(0, 0, 0, 0.65)' }}>提交完需求后，产品技术人员会在24小时内联系您</div>
                </div>
            }
        >
            <Form
                form={form}
                layout='vertical'
            >
                <Form.Item label='需求类型' name='type' rules={[{ required:true, message:'需求类型不能为空'}]}>
                    <Select>
                        <Option value='1'>定制功能</Option>
                    </Select>
                </Form.Item>
                <Form.Item label='请填写详细需求' name='desc'>
                    <TextArea maxLength={200} />
                </Form.Item>
            </Form>
            <Dragger
                // fileList={fileList}
                maxCount={1}
                onChange={handleChange} 
                onDrop={handleDrop} 
                beforeUpload={handleBeforeUpload}
                style={{ marginBottom:'1rem' }}
                progress={{
                    // strokeColor:{ '0%':'#e2e4e9', '100%':'#375dfb', '' },
                    strokeWidth:6,
                    status:'active',
                    format:percent => percent && `${percent.toFixed(1)}%`
                }}
            >
                <p>
                  <CloudUploadOutlined style={{ fontSize:'2rem', color:'#525866'}} />
                </p>
                <p className="ant-upload-text">拖入需要上传的文件</p>
                <p className="ant-upload-hint">
                    { '仅支持' + Object.keys(fileTypes).join('/') + '格式，最大20MB' }
                </p>
                <Button>选择文件</Button>
            </Dragger>
            <Button type='primary' size='large' style={{ margin:'1rem 0', width:'100%' }} onClick={()=>{
                form.validateFields()
                .then(values=>{
                    if ( fileList.length ) {
                        // 上传文件到服务器
                    }
                    new Promise((resolve, reject)=>{
                        setTimeout(()=>{
                            resolve();
                        },500)
                    })
                    .then(()=>{
                        onClose();
                        onOpenConfirmModal();
                    })
                })
            }}>确认提交</Button>
        </Modal>
    )
}
function areEqual(prevProps, nextProps) {
    if (prevProps.visible !== nextProps.visible) {
        return false;
    }
    return true;
}
export default memo(DemandModal, areEqual);
